<script lang="ts" setup>
import { ref, reactive, onMounted, watchEffect } from 'vue'
import {venuesHook} from "../hooks/venuesHooks";
import VenuesStore from '../store/VenuesStore'
import { useRouter } from "vue-router";
const router = useRouter();
const venuesHooks = venuesHook()

const tableData = ref([]);
const store = VenuesStore();
const fromData = reactive({
    limit: "5",
    name: "",
    page: "1",
    count: "",
});
// 请求数据
const PageList = () => {
    venuesHooks.page_Venues(fromData.limit, fromData.name, fromData.page, fromData.count);
    console.log("数据", tableData);
    // return tableData;   
};
// 表格
watchEffect(() => {
    tableData.value = store.getVenuesPageList
})
//////////////////////分页
// 分页请求数据
const PageLists = () => {
    const { limit, name, page, count } = fromData;
    venuesHooks.page_Venues(limit, name, page, count);
};
// 表格监听
watchEffect(() => {
    tableData.value = store.getVenuesPageList
    fromData.total = store.venuesTotal
})

// 分页改变查询的回调
const handlePageChange = (page: number) => {
    console.log('切换到页面', page);
    fromData.page = page.toString();
    PageLists();
}
///////////////////////删除
const handleDelete = (id: number) => {
    console.log("点击", id);
    // 调用删除场馆接口，删除成功后重新获取列表数据
    venuesHooks.delete_id_venues(id)
    PageList();
}
///////////////////////新增
const addchangguan = (e: any, type: number) => {

  let data = {};
  if (type == 1) {
    let id = e.currentTarget.dataset.id;
    data = { id, type };
  } else {
    data = { type };
  }
  console.log("传递参数",data)
  router.push({ name: "Changguantj", query: data });
};
onMounted(() => {
    PageList();
});
import {
    Delete,
    Edit,
} from '@element-plus/icons-vue'
//
</script>
<template>
    <div class="big_box">
        <div class="content1">
            <el-input v-model="fromData.name" class="w-50 m-2" size="large" placeholder="输入场馆名称" />
            <el-button type="primary" @click="PageList" class="chaxun">查询</el-button>
            <el-button @click="addchangguan($event, 0)">添加场馆</el-button>
        </div>
        <div class="content2">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编号" />
                <el-table-column prop="name" label="场馆名称" width="180" />
                <el-table-column prop="phone" label="电话" width="180" />
                <el-table-column prop="email" label="邮箱" />
                <!-- <el-table-column prop="state" label="状态" /> -->
                <el-table-column prop="state" label="状态">
                <template #default="{ row }">
                    <el-tag class="ml-2" :type="row.cardStatus == 0 ? '' : 'danger'">{{
                        row.cardStatus == 0 ? "正常" : "禁用"
                    }}</el-tag>
                </template>
            </el-table-column>
                <el-table-column label="操作" width="120" fixed="right" align="center">
                    <template #default="{ row }">
                        <el-button @click="addchangguan($event,1)" type="primary" :data-id="row.id" :icon="Edit"
                                circle />
                        <el-button type="danger" @click="() => handleDelete(row.id)" :icon="Delete" circle />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <!-- <el-pagination background layout="prev, pager, next" :total="100" /> :total="parseInt(fromData.total)" 
             -->
            <el-pagination background layout="prev, pager, next" :total="100" :page-size="fromData.limit"
                :current-page="fromData.page" @current-change="handlePageChange" />
        </div>
    </div>
</template>
<style lang="less" scoped>
.w-50 {
    width: 200px;
    margin-right: 10px;
}

.content2 {
    margin: 20px 0px 20px 0px;
}

.el-pagination {
    margin-left: 770px;
}

.chaxun {
    margin-right: 10px;
}

//添加跳转
.my-link {
    text-decoration: none;
    /* 去除默认下划线样式 */
}
</style>